<pngx-toasts></pngx-toasts>

<pngx-file-drop>
    <ng-container content>
        <router-outlet></router-outlet>
    </ng-container>
</pngx-file-drop>

<tour-step-template>
    <ng-template #tourStep let-step="step">
        <p class="tour-step-content" [innerHTML]="step?.content"></p>
        <hr/>
        <div class="d-flex justify-content-between align-items-center">
            <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
            <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
                <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
                    <button class="btn btn-outline-danger" (click)="tourService.end()">
                        {{ step?.endBtnTitle }}
                    </button>
                </div>
                <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary" (click)="tourService.prev()">
                        « {{ step?.prevBtnTitle }}
                    </button>
                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary" (click)="tourService.next()">
                        {{ step?.nextBtnTitle }} »
                    </button>
                </div>
            </div>
        </div>
    </ng-template>
</tour-step-template>
